import React from 'react';
import {BLACK_CHESS, SPACE} from "../constants/checkerboard";
import PropTypes from 'prop-types';
import style from './Col.module.less'

export default class BoardCol extends React.Component {

    static defaultProps = {};

    static propTypes = {
        onColClick: PropTypes.func
    };

    /**
     * 当点击单元格的时候执行的函数
     */
    handleClick() {
        const {row, col, value} = this.props;
        // 根据value判断，如果是空格的时候才能落子
        if (value === SPACE) {
            this.props.onColClick(row, col);
        }

    }

    render() {
        // 需要把顶部底部和侧边多余的内容去掉
        // 把第一行的顶部多余的内容去掉
        // 把第一列左侧多余的内容去掉
        // 最后一列右侧的内容去掉
        // 最后一行下面的内容去掉
        const {row, col, value} = this.props;
        // 根据不同的value设置棋子显示黑棋或者白棋，或者空白
        // console.log("value的值" + value);

        // 样式的设置
        let rowStyle = {};
        let colStyle = {};
        if (row === 0) {
            colStyle = {
                height: '50%',
                top: '50%'
            }
        }
        // 代表是最后一行
        if (row === 14) {
            colStyle = {
                height: '50%',
                top:0
            }
        }

        if (col === 0) {
            rowStyle = {
                width: '50%',
                left: '50%'
            }
        }

        if (col === 14) {
            rowStyle = {
                width: '50%',
                left:0
            }
        }


        return (
            <div className="BoardCol-box" onClick={this.handleClick.bind(this)}>
                <div style={rowStyle} className="BoardCol-row" />
                <div style={colStyle} className="BoardCol-col" />
                {
                    value !== SPACE &&
                    <div style={{background:value===BLACK_CHESS?'black':'white'}} className={style['chess-box']} />
                }
            </div>
        );
    }
}
